<!DOCTYPE html>
<html>
<head>
    <title>Detailed API Debug</title>
</head>
<body>
    <h1>Detailed API Response Debug</h1>
    <button onclick="testAPI()">Test API</button>
    <div id="result"></div>

    <script>
        async function testAPI() {
            try {
                const response = await fetch('https://tqi.techlinkpets3d.com/api/daka/person_rank', {
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    // 添加防缓存参数
                    cache: 'no-cache'
                });
                
                // 显示响应详情
                document.getElementById('result').innerHTML = `
                    <h2>Response Details:</h2>
                    <p>Status: ${response.status}</p>
                    <p>Status Text: ${response.statusText}</p>
                    <p>Content-Type: ${response.headers.get('content-type')}</p>
                    <p>Content-Length: ${response.headers.get('content-length') || 'Unknown'}</p>
                `;
                
                // 获取响应文本
                const text = await response.text();
                
                // 显示原始响应
                document.getElementById('result').innerHTML += `
                    <h3>Raw Response Text (first 1000 chars):</h3>
                    <pre>${text.substring(0, 1000)}${text.length > 1000 ? '...' : ''}</pre>
                    <p>Total response length: ${text.length} characters</p>
                `;
                
                // 尝试解析JSON
                try {
                    const jsonData = JSON.parse(text);
                    document.getElementById('result').innerHTML += `
                        <h3 style="color: green;">Successfully Parsed JSON:</h3>
                        <pre>${JSON.stringify(jsonData, null, 2)}</pre>
                    `;
                } catch (parseError) {
                    document.getElementById('result').innerHTML += `
                        <h3 style="color: red;">JSON Parse Error:</h3>
                        <pre>${parseError.message}</pre>
                        <p>This suggests the API is returning HTML or plain text instead of JSON.</p>
                    `;
                }
            } catch (error) {
                document.getElementById('result').innerHTML = `
                    <h2 style="color: red;">Network Error:</h2>
                    <pre>${error.message}</pre>
                `;
            }
        }
    </script>
</body>
</html>